<template>
  <div id="barCharts" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['xData', 'yData', 'yData2', 'yDataName', 'yDataName2', 'barColor'],
  name: '',
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  created() {},
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('barCharts'))
      // 绘制图表
      myChart.setOption({
        grid: {
          show: true, //是否显示图表背景网格
          left: '0', //图表距离容器左侧多少距离
          right: '10%', //图表距离容器右侧侧多少距离
          bottom: '0%', //图表距离容器上面多少距离
          top: '20%', //图表距离容器下面多少距离
          containLabel: true,
          borderWidth: 0
        },
        legend: {
          top: '0%', // 控制 板块控制器的位置
          right: '25%',
          icon: 'circle',
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
          // itemStyle: {
          //     color: '#ccc'
          // },
          data: [
            {
              name: this.yDataName, // 这个name需要和 series 里面的 name 对应起来
              textStyle: {
                color: '#A4B7C3' // 单独设置某一个图列的颜色
              }
            },
            {
              name: this.yDataName2, // 这个name需要和 series 里面的 name 对应起来
              textStyle: {
                color: '#A4B7C3' // 单独设置某一个图列的颜色
              }
            }
          ]
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: [
          {
            name: this.yDataName,
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#08182E'
              }
            }
          },
          {
            name: this.yDataName2
          }
        ],
        series: [
          {
            data: this.yData,
            type: 'bar',
            barWidth: '20px',
            name: this.yDataName,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: this.barColor[0] || '#091D33' // 0% 处的颜色
                  },
                  {
                    offset: 0.2,
                    color: this.barColor[1] || '#051D35' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: this.barColor[2] || '#0DB9F8' // 100% 处的颜色
                  }
                ]
              }
            }
          },
          {
            name: this.yDataName2,
            type: 'line',
            data: this.yData2,
            smooth: true,
            yAxisIndex: 1, // 指定使用第二个Y轴
            lineStyle: {
              color: '#FCF146', // 折线颜色
              width: 2 // 折线宽度
            },
            itemStyle: {
              color: '#FCF146' // 拐点标志颜色
            }
          }
        ]
      })
      // window.addEventListener('resize', function () {
      //     myChart.resize();
      // });
    }
  }
}
</script>
<style></style>